<script setup lang="ts">
import type {IDrawer} from '@/type/interfaces'
interface IProps {
  drawer: IDrawer
}
const props = defineProps({
  drawer:{
    type: Object as PropType<IDrawer>,
    default:{
      direction:'rtl',
      title:'这是一个抽屉',
      size: '60%',
    }
  }
})
const drawerConfig = ref<IDrawer>({
  direction:'rtl',
  title:'这是一个抽屉',
  size: '60%',
})
const isVisable = ref(false)//抽屉打开or关闭
const open = ()=>{//打开抽屉
  Object.assign(drawerConfig.value,props.drawer)
  isVisable.value = true
}
defineExpose({
  open
})
</script>
<template>
    <el-drawer
    v-model="isVisable"
    :title="drawerConfig.title"
    :direction="drawerConfig.direction"
    :size="drawerConfig.size"
    v-bind="$attrs"
  >
    <template #header>
      <slot name="header"></slot>
    </template>
    <template #default>
      <slot name="body"></slot>
    </template>
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-drawer>
</template>